<template>
	<view class="stairNav-mod flex width">
		<view class="stairNav-mod-item center color" v-for="item,index in list" :key="index" :class="{stairNavItemActive:index==countIndex}" @click="stairNavItemClick(index)">
			{{item.title}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"stairNav",
		data() {
			return {
				countIndex:0
			};
		},
		props:{
			list:{
				type:Array,
				default:[]
			}
		},
		methods:{
			stairNavItemClick(index) {
				this.countIndex = index
				this.$emit('stairNavClick',index)
			}
		}
	}
</script>

<style lang="scss">
.stairNav-mod {
	justify-content: space-between;
	.stairNav-mod-item {
		background-color: #e0f5f0;
		padding: 15rpx 42rpx;
		font-size: 27rpx;
		border-radius: 8px 8px 0 0;
	}
	.stairNavItemActive {
		color: #cfffff;
		background-color: #35bb9a;
	}
}
</style>
